<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色信息维护</title>
    <script src="../../../resources/app/all.js" type="text/javascript"></script>
    <style type="text/css">
        a:link {
            text-decoration: none;
        }

        a:visited {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        a:active {
            text-decoration: none;
        }

        .layui-tree-icon {
            height: 14px;
            line-height: 12px;
            width: 14px;
            text-align: center;
            border: 1px solid #c0c4cc;
        }

        .layui-tree-set {
            width: 100%;
            position: relative;
            padding: 5px;
        }
    </style>
</head>
<body class="easyui-layout" data-options="fit:true">
<div data-options="region:'center'" style="padding: 5px;">
    <form class="layui-form layui-form-pane" action="" id="form" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入角色名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色代码</label>
            <div class="layui-input-block">
                <input type="hidden" id="id" name="id">
                <input type="text" name="code" lay-verify="required" autocomplete="off" placeholder="请输入角色代码"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" id="switchStart" name="startColse" lay-skin="switch" lay-text="使用|停用">
            </div>
        </div>
        <div class="layui-form-item  layui-form-text">
            <label class="layui-form-label">菜单权限</label>
            <div class="layui-input-block">
                <div id="tree"></div>

            </div>
        </div>
    </form>
</div>
<div data-options="region:'south',border:false">
    <div class="dialog-button">
        <button id="save" class="layui-btn layui-btn-normal">确定</button>
        <button id="cancel" class="layui-btn layui-btn-primary">取消</button>
    </div>
</div>

<script>
    layui.use(['form', 'layedit', 'laydate', 'tree', 'util'], function () {
        var form = layui.form
            , layer = layui.layer
            , tree = layui.tree
            , util = layui.util;
        let parData = ToolUtil.OpenData();
        if (parData.act == 'edit') {
            let data = parData.data;
            data.startColse = true
            form.val('example', JSON.parse(JSON.stringify(data)));
        }

        let renderTree = function () {
            let nodeData = [];
            let flag = false;
            if (parData.act == 'edit') {
                ToolUtil.GET({
                    url: global.api_url + '/sys/sysPermission/list/' + parData.id,
                    async: false,
                    success: function (obj) {
                        if (obj && obj.code === '00') {
                            let das = obj.data;
                            if (das.length > 0) {
                                let data = [];
                                for (let val of das) {
                                    data.push(val.id);
                                }
                                flag = true;
                                nodeData = data;
                            }
                        } else if (obj.code === '98' || obj.code === '97') {
                            location.href = global.loginUrl;
                        } else {
                            layer.alert(obj.msg,{icon:5});
                        }
                    }
                });
            }
            ToolUtil.GET({
                url: global.api_url + '/sys/sysPermission/list/permission',
                async: false,
                success: function (obj) {
                    if (obj && obj.code === '00') {
                        let data = obj.data;
                        let result = [];
                        for (let val of data) {
                            if (val.type === 1) {
                                let json = {
                                    id: val.id,
                                    title: val.name,
                                    spread: true
                                };
                                formater(json, nodeData, data)
                                result.push(json);
                            }
                        }
                        initData(result, nodeData, flag)
                    } else if (obj.code === '98' || obj.code === '97') {
                        location.href = global.loginUrl;
                    } else {
                        layer.alert(obj.msg,{icon:5});
                    }
                }
            });

        };


        function formater(json, nodeData, data) {
            let node = [];
            for (let val of data) {
                if (json.id == val.parentId) {
                    node.push(val);
                }
            }
            if (node.length > 0) {
                let index = jQuery.inArray(json.id, nodeData);
                if (index != -1) {
                    nodeData.splice(index, 1);
                }
                let children = [];
                for (let val of node) {
                    let nd = {
                        id: val.id,
                        title: val.name
                    };
                    formater(nd, nodeData, data);
                    children.push(nd);
                }
                json.checked = false;
                json.children = children;
            }
        }

        function initData(data, nodeData, flag) {
            tree.render({
                elem: '#tree'
                , data: data
                , id: 'tree1'
                , showCheckbox: true
            });
            if (flag) {
                tree.setChecked('tree1', nodeData);
            }
        }

        renderTree();
        layui.$('#save').on('click', function () {
            let data = ToolUtil.FormJSON("form");
            if (data.startColse.length == 1) {
                data.start = 0
            } else {
                data.start = 1
            }
            delete data.startColse;
            let trees = data.layuiTreeCheck;
            data.perms = trees;
            delete data.layuiTreeCheck;
            if (parData.act == 'edit') {
                ToolUtil.PUT({
                    url: global.api_url + '/sys/sysRole',
                    data: JSON.stringify(data),
                    async: false,
                    success: function (obj) {
                        if (obj && obj.code === '00') {
                            saveClear()
                        } else if (obj.code === '98' || obj.code === '97') {
                            location.href = global.loginUrl;
                        } else {
                            layer.alert(obj.msg,{icon:5});
                        }
                    }
                });
            } else {
                ToolUtil.POST({
                    url: global.api_url + '/sys/sysRole',
                    data: JSON.stringify(data),
                    async: false,
                    success: function (obj) {
                        if (obj && obj.code === '00') {
                            saveClear()
                        } else if (obj.code === '98' || obj.code === '97') {
                            location.href = global.loginUrl;
                        } else {
                            layer.alert(obj.msg,{icon:5});
                        }
                    }
                });
            }

        });
        layui.$('#cancel').on('click', function () {
            clear()
        });

        function saveClear() {
            parent.location.reload();
            clear();
        }

        function clear() {
            let index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            layer.close(index);
        }


    });
</script>
</body>
</html>